var logoUrl = "";
let json;

var getBase64 = function(data) {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.font = "normal normal 900 150px Arial";
    ctx.fillText(data, 50, 150);
    return c.toDataURL("image/png");
}

var clearCanvas = function() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.clearRect(0, 0, c.width, c.height);
}

var showWordCloud = function(list) {
    var myChart = echarts.init(document.getElementById('wordCloud'));
    var maskImage = new Image();
    maskImage.src = "";

    maskImage.onload = function() {
        myChart.setOption({
            backgroundColor: '#fff',
            tooltip: {
                formatter: "<img style='width:25px;height:25px;' src='hot.png'/>热度:{c}",
                backgroundColor: 'rgba(255,255,255,0)',
                textStyle: {
                    fontWeight: 'bold',
                    fontSize: 20,
                    color: '#FF0000',
                }
            },
            toolbox: {
                right: '5%',
                feature: {
                    dataView: { readOnly: true },
                    restore: {},
                }
            },
            series: [{
                type: 'wordCloud',
                gridSize: 1,
                sizeRange: [12, 55],
                rotationRange: [-45, 0, 45, 90],
                maskImage: maskImage,
                textStyle: {
                    normal: {
                        color: function() {
                            return 'rgb(' +
                                Math.round(Math.random() * 255) +
                                ', ' + Math.round(Math.random() * 255) +
                                ', ' + Math.round(Math.random() * 255) + ')'
                        }
                    },
                    emphasis: {
                        fontWeight: 'bolder',
                        fontSize: 30,
                        color: '#00467A'
                    }
                },
                left: 'center',
                top: 'center',
                // width: '96%',
                // height: '100%',
                right: null,
                bottom: null,
                // width: 300,
                // height: 200,
                // top: 20,
                data: list
            }],
            graphic: {
                elements: [{
                    type: 'image',
                    style: {
                        image: logoUrl,
                        width: 280,
                        height: 70,
                        opacity: 0.9

                    },
                    right: 'center',
                    bottom: '0%',
                }]
            }
        })
    }
}

var resSaveCloud = function(data) {
    if (data) {
        alert(tr("Save successfully, please go to the index file directory to view."));
        // console.log("111");
    } else {
        alert(tr("Save failed!"));
    }
}

document.getElementById("save").onclick = function() {
    var myChart = echarts.getInstanceByDom(document.getElementById("wordCloud"));
    var url = myChart.getDataURL();
    finder.saveWordCloud(url, json[0].year + "の热点分析词云图");
};

if (location.href.startsWith('qrc:')) {
    new QWebChannel(qt.webChannelTransport, function(channel) {
        finder = channel.objects.finder;
        finder.saveWC.connect(resSaveCloud);
    });
    json = JSON.parse(document.getElementById('src').innerText);
    logoUrl = getBase64(json[0].year);
    var list = json.slice(1, json.length);
    clearCanvas();
    // console.log(list);
    showWordCloud(list);
} else {
    load('wordCloud.test.js', function() {
        // 2019 year data
        json = JSON.parse(test.data);
        // console.log(json);
        logoUrl = getBase64(json[0].year);
        var list = json.slice(1, json.length);
        clearCanvas();
        // console.log(list);
        showWordCloud(list);
    });
}